<template>
  <div class="flex_box">
    <el-carousel direction="vertical" :autoplay="true" class="notice-list">
      <div class="notice-lable">公告通知 |</div>
      <el-carousel-item v-for="item in noticeList" :key="item.id" class="notice-list-item">
        <p class="medium" @click="noticeDetail(item.id)">{{ item.name }}</p>
      </el-carousel-item>

    </el-carousel>
    <div class="get_more mainColor">
      <router-link :to="'/cms/noticeList'">
        更多 >
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import cms from '@/api/cms'

export default {
  name: 'DashboardEditor',
  data() {
    return {
      noticeList: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    console.log('公告组件')
    this.init()
  },
  methods: {
    async init() {
      const params = {
        pageIndex: 1,
        pageSize: 20,
        sortFields: 'id_a',
        queryList: []
      }
      const result = await cms.noticeList(params)
      if (result.code === 200) { this.noticeList = result.data.records }
    },
    noticeDetail(id) {
      this.$router.push('/noticeListEdit/edit/' + id)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex_box{display: flex; background: white; cursor:pointer;}
.get_more{flex: 1;height: 45px;line-height: 45px;}
.notice-list{
  background: white;height: 45px;
  border-radius: 5px;
  padding: 0 20px;
  flex: 23;
  .notice-lable{
    font-weight:bold;
    width: 8%;
    height: 45px;
    line-height: 45px;
  }
  .notice-list-item{
   height: 45px;
   line-height: 15px;
   padding-left: 6%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor:pointer;
  }

  }
  .show-data{
    margin-top: 10px;
    border-radius: 5px;
    background: white;
  }
</style>
